import ItemList from './ItemList.vue'

const camelize = str => str.charAt(0).toUpperCase() + str.slice(1)

// This is a factory function for dynamically creating root-level list views,
// since they share most of the logic except for the type of items to display.
// They are essentially(本质上) higher order components wrapping ItemList.vue.
// 高阶组件（当做一个正经的Vue组件看待即可）
export default function createListView (type) {
  return {
    name: `${type}-stories-view`,

    asyncData ({ store }) {
      return store.dispatch('FETCH_LIST_DATA', { type })
    },
    // 这里设置title，到时候给混入的created钩子调用获取这个title
    // 在服务端就读取这个title，设置到context中去，然后最后渲染器
    // 就会吧html的title改为这个设置的title
    title: camelize(type),
    
    mounted() { // 该生命周期只有客户端才会执行
      console.log('createListView mounted')
    },

    render (h) {
      // 当前组件相当于路由组件，ItemList.vue只是他的子组件罢了，不属于路由组件的范畴
      return h(ItemList, { props: { type }})
    }
  }
}
